<!--  -->
<template>
    <div class="combobox" :class="clearable && arrayValue.length>0?'combobox_clearable':''" :style="{'width': width}">
        <div v-if="isExpress" class="">{{arrayValue}}</div>
        <div class="select-selection__rendered" v-else>
            <div v-if="arrayValue.length===0" class="select-selection__placeholder">{{ placeholder }}</div>
            <ul v-else class="select-list__wrapper">
                <li v-for="item in arrayValue" :key="item[displayProp.value]">
                    <div class="select-item__content">{{ item[displayProp.label] }}</div>
                    <span class="select-item__remove" @click.stop="handleRemove(item)"><i class="el-icon-close"></i></span>
                </li>
            </ul>
        </div>
        <div v-if="clearable && arrayValue.length>0" class="select-selection__clear">
            <el-button @click.stop="handleClear()" type="mini" icon="el-icon-circle-close"></el-button>
        </div>
    </div>
</template>

<script>
export default {
    name:"ComboInput",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: {
        data: [Array,String],
        clearable: {
            type: Boolean,
            default: false
        },
        displayProp: {
            type: Object,
            default: ()=>{
                return {label:"name", value:"value"}
            }
        },
        placeholder:{
            type: String,
            default: "请选择"
        },
        width: {
            type: String,
            default: "200px"
        }
    },
    data() {
        //这里存放数据
        return {
            isExpress: false,
            arrayValue: []
        };
    },
    //监听属性 类似于data概念
    computed: {

    },
    //监控data中的数据变化
    watch: {
        data:{
            immediate:true,
            handler(newVal,oldVal){
                this.isExpress = /^\$\{[a-zA-Z0-9.()]+\}$/i.test(newVal)    //判断是否为表达式，表达式格式${XXXX.XX(XXX)},只能包含中英文，数字和.()符号
                this.arrayValue = newVal
            }
        }
    },
    //方法集合
    
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        console.log("加载====>",this.style)
    },
    methods: {
        handleRemove(row){
            this.arrayValue.forEach((item,index,array)=>{
                if(item[this.displayProp.value]==row[this.displayProp.value]){
                    array.splice(index,1)
                }
            })
            this.$emit("update:data",this.arrayValue)
            this.$emit("remove",null)
        },
        handleClear(){
            this.arrayValue = []
            this.$emit("update:data",this.arrayValue)
            this.$emit("remove",null)
        }
    },
}
</script>
<style lang='scss' scoped>
    //@import url(); 引入公共css类
    .combobox{
        border: 1px solid #dedede;
        padding: 1px;
        border-radius: 4px;
        position: relative;

        &.combobox_clearable{
            padding-right:30px !important;
            .select-selection__clear{
                position: absolute;
                right:5px;
                top:0;
                bottom:0;
                margin:auto;
                height:14px;
                width:14px;
                opacity: 0;
                transition: opacity 0.2s;
                .el-button{
                    background-color: transparent;
                    border:0 none;
                    width:14px;
                    height:14px;
                    vertical-align: top;
                    padding: 0;
                    line-height: 1;
                }
            }
            &:hover{
                .select-selection__clear{
                    opacity: 1; 
                }
                
            }
        }
        .select-selection__rendered{
            line-height: 22px;
            .select-selection__placeholder{
                padding:0 10px;
                color:#C0C4CC;
                font-size:12px;
            }
        }
        .select-list__wrapper{
            padding:0;
            margin:0;
            li{
                float: left;
                list-style: none;
                background-color: #fafafa;
                color: rgba(0, 0, 0, 0.65);
                border: 1px solid #e8e8e8;
                position: relative;
                padding:0 5px;
                margin:1px;
                height: 23px;
                line-height: 21px;
                .select-item__content{
                    font-size:12px;
                    display: inline-block;
                }
                .select-item__remove{
                    display: inline-block;
                    margin-left:5px;
                    color: rgba(0, 0, 0, 0.5);
                    &:hover{
                        color:rgba(0, 0, 0, 0.8);
                        cursor: pointer;
                    }
                }
                & + li{
                    
                }
            }
        }
    }
</style>